import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit'
import axios from 'axios'

interface ShoppingCartState {
  loading: boolean,
  error: null | unknown,
  items: any[]
}

// 初始化数据
const initialState: ShoppingCartState = {
  loading: true,
  error: null,
  items: []
}

// 查询购物车数据
export const getShoppingCart = createAsyncThunk(
  "shoppingCart/getShoppingCart",
  async (jwt: string | undefined) => {
    const { data: {data} } = await axios.get('https://mock.mengxuegu.com/mock/61c70e2ebba8817f8a413580/tourism_website/shoppingCart',{
    headers: {
      Authorization: `bearer ${jwt}`
    }
    })
    console.log("详情99999999", data)
    return data.shoppingCartItems
  }
)

// 添加购物车数据
export const addShoppingCartItem = createAsyncThunk(
  "shoppingCart/addShoppingCartItem",
  async (jwt: string | undefined, thunkAPI) => {
       const { data } = await axios.get('https://mock.mengxuegu.com/mock/61c70e2ebba8817f8a413580/tourism_website/shoppingCart',{
        headers: {
          Authorization: `bearer ${jwt}`
        }
       })
       console.log("详情shopping", data)
      return data.shoppingCartItems
  }
)

// 添加购物车数据
export const checkout = createAsyncThunk(
  "shoppingCart/checkout",
  async (jwt: string | undefined) => {
       const { data } = await axios.get('https://mock.mengxuegu.com/mock/61c70e2ebba8817f8a413580/tourism_website/payOrder')
       console.log("详情shopping", data)
      return data
  }
)

export const clearShoppingCartItem = createAsyncThunk(
  "shoppingCart/clearShoppingCartItem",
  async (parameters: { jwt: string; itemIds: number[] }, thunkAPI) => {
    return await axios.delete(
      `https://mock.mengxuegu.com/mock/61c70e2ebba8817f8a413580/tourism_website/clearShoppingCart`,
      {
        headers: {
          Authorization: `bearer ${parameters.jwt}`,
        },
      }
    );
  }
);

export const shoppingCartSlice = createSlice({
  name: 'shoppingCart', // 命名空间名称
  initialState, // 初始化数据
  reducers: {
  
  }, // 这里的reducer是把action和reducer捆绑在了一起.所以不需要在单独定义action,这里的reducer是个对象
  extraReducers: {
    [getShoppingCart.pending.type]: (state) => {
      // 原始写法
      // return { ...state, loading: true }
      state.loading = true  // immer
    },
    // reducer中已经提前定义好了action的参数
    // 请求成功
    [getShoppingCart.fulfilled.type]: (state, action) => {
      state.loading = false
      state.items = action.payload
      state.error = null
    },
    // 请求失败
    [getShoppingCart.rejected.type]: (state, action: PayloadAction<unknown | null>) => {
      state.loading = false
      state.error = action.payload
    },
    [addShoppingCartItem.pending.type]: (state) => {
      // 原始写法
      // return { ...state, loading: true }
      state.loading = true  // immer
    },
    [clearShoppingCartItem.pending.type]: (state) => {
      state.loading = true
    },
    [clearShoppingCartItem.fulfilled.type]: (state, action) => {
      state.loading = false
      state.items = []
      state.error = null
    },
    [clearShoppingCartItem.rejected.type]: (state, action) => {
      state.loading = false
      state.error = action.payload
    },
    [checkout.pending.type]: (state) => {
      // 原始写法
      // return { ...state, loading: true }
      state.loading = true  // immer
    },
    // reducer中已经提前定义好了action的参数
    // 请求成功
    [checkout.fulfilled.type]: (state, action) => {
      // 下单支付之后购物车需要被清空
      state.loading = false
      state.items = []
      state.error = null
    },
    // 请求失败
    [checkout.rejected.type]: (state, action: PayloadAction<unknown | null>) => {
      state.loading = false
      state.error = action.payload
    },
  }
})